<template>
    <el-card>
      <el-table border :data="skuList" v-loading="loading">
        <el-table-column type="index" label="序号" width="80px" align="center" />
        <el-table-column label="名称" prop="skuName" align="center" />
        <el-table-column label="描述" prop="skuDesc" align="center" />
        <el-table-column label="默认图片" align="center">
          <template v-slot="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
          </template>
        </el-table-column>
        <el-table-column label="重量(KG)" prop="weight" align="center" />
        <el-table-column label="价格(元)" prop="price" align="center" />
        <el-table-column label="操作" align="center" width="260px">
          <template v-slot="{row}">
            <el-tooltip v-if="row.isSale==0" class="box-item" effect="dark" content="上架" placement="top">
              <el-button :icon="Top" type="info" size="small" @click="toOnSale(row)"></el-button>
            </el-tooltip>
            <el-tooltip v-else class="box-item" effect="dark" content="下架" placement="top">
              <el-button :icon="Bottom" type="success" size="small" @click="toCancleSale(row)"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
              <el-button :icon="Edit" type="primary" size="small"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="查看" placement="top">
              <el-button :icon="InfoFilled" type="info" size="small" @click="toCheckSkuInfo(row.id)"></el-button>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
              <!-- <el-button :icon="Delete" type="danger" size="small" @click="toDelSkuInfo(row.id)"></el-button> -->
              <el-popconfirm title="确定要删除此条数据吗?" @confirm="toDelSkuInfo(row.id)">
                <template #reference>
                  <el-button :icon="Delete" type="danger" size="small"></el-button>
                </template>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

    <!-- 分页器 -->
    <el-pagination style="margin-top:10px" v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[7, 15, 20, 30]" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 先写一个抽屉效果 -->
    <el-drawer 
    v-model="drawer2" 
    title="I am the title" 
    :direction="direction" 
    size="45%" 
    :before-close="handleClose">
    <!-- 响应式布局 -->
    <el-row :gutter="10">

      <el-col :span="7">
        <div>sku名称</div>
      </el-col>
      <el-col :span="17">
        <div>{{skuInfo.skuName}}</div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="7">
        <div>sku描述</div>
      </el-col>
      <el-col :span="17">
        <div>{{skuInfo.skuDesc}}</div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="7">
        <h4>价格</h4>
      </el-col>
      <el-col :span="17">
        <p>{{skuInfo.price}}</p>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">
        <h4>平台属性</h4>
      </el-col>
      <el-col :span="17">
        <el-tag v-for="skuAttrValue in skuInfo.skuAttrValueList" :key="skuAttrValue.id">{{skuAttrValue.attrName+'-'+skuAttrValue.valueName}}</el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">
        <h4>销售属性</h4>
      </el-col>
      <el-col :span="17">
        <el-tag v-for="saleAttr in skuInfo.skuSaleAttrValueList" :key="saleAttr.id">{{saleAttr.saleAttrName+'-'+saleAttr.saleAttrValueName}}</el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">
        <h4>商品图片</h4>
      </el-col>
      <el-col :span="17">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
            <el-image :src="item.imgUrl" style="width:100%"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
     
    </el-drawer>

  </el-card>
</template>

<script lang="ts">
export default {
  name:'Sku'
}
</script>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import { Top, Bottom, Delete, Edit, InfoFilled } from '@element-plus/icons-vue';
import { reqGetAllSkuList,reqSkuInfoOnSale,reqSkuInfoCancelSale,reqDeleteSkuInfo,reqGetOneSkuInfo} from '@/api/product/sku';
import { ElMessage } from 'element-plus'; 

const currentPage = ref(1)
const pageSize = ref(5)
const loading = ref(false)
//存放sku列表数据
const skuList = ref([])
//存放一个sku的数据
const skuInfo = ref({})

const total = ref(0);

//抽屉
const drawer2 = ref(false)
const direction = ref('rtl')

//定义一个获取所有sku列表的函数
const getAllSkuList = async () => {
  loading.value = true
  const result = await reqGetAllSkuList(currentPage.value, pageSize.value)
  console.log('skuList',result)
  skuList.value = result.records
  total.value = result.total;
  loading.value = false; 
}

//页面挂载完毕之后获取skuList的数据

onMounted(() => {
  
  getAllSkuList()

})

//页码发生变化时,重新渲染数据
const handleCurrentChange = (val:number) => {
  currentPage.value = val
  getAllSkuList();
}

//每页有多少条数据触发时,也要重新渲染页面
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置为1

  getAllSkuList();
};

// sku上架
const toOnSale = async (row)=>{
  await reqSkuInfoOnSale(row.id)
  row.isSale = 1 - row.isSale
  // getAllSkuListData()
}

//sku下架
const toCancleSale = async (row)=>{
  await reqSkuInfoCancelSale(row.id)
  row.isSale = 1 - row.isSale
}

//删除sku
const toDelSkuInfo =async (id:number)=>{
  await reqDeleteSkuInfo(id)
  ElMessage.success('删除Sku成功...')
  getAllSkuList()
}

//查看skuInfo一个对象信息
const toCheckSkuInfo = async (id: number) => {
  drawer2.value = true;
  skuInfo.value = await reqGetOneSkuInfo(id);
};


</script>

<style>

</style>